<template>
  <router-view></router-view>
  <el-row :gutter="12">
    <el-col :span="6">
      <el-card shadow="always" class="statistic_count">
        <el-button :loading="productLoading">商品总数 : {{ productNum }} </el-button>
        <el-button @click="productFn()">更新</el-button>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="always" class="statistic_count">
        <el-button :loading="userLoading"> 用户总数 : {{ userNum }} </el-button>
        <el-button @click="userFn()">更新</el-button>
      </el-card>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="12">
      <div id="main1"></div>
    </el-col>
    <el-col :span="12">
      <div id="main2"></div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import {
  productTongjiRequest,
  kDataRequest,
  userTongjiRequest,
  simpleDataRequest,
} from '../api/statistic'
let productLoading = ref(false)
let userLoading = ref(false)
let productNum = ref(0)
let userNum = ref(0)
//商品数量
function productFn() {
  productLoading.value = true
  setTimeout(() => {
    productTongjiRequest().then((r) => {
      console.log(r.data)
      productNum.value = r.data.data
      productLoading.value = false
    })
  }, 500)
}
productFn()
//用户数量
function userFn() {
  userLoading.value = true
  setTimeout(() => {
    userTongjiRequest().then((r) => {
      console.log(r.data)
      userNum.value = r.data.data
      userLoading.value = false
    })
  }, 500)
}
userFn()

let productListArr = ref([])
onMounted(async () => {
  //k线图图表
  let r = await kDataRequest()
  console.log(r.data)
  productListArr.value = r.data.data
  var myChart = echarts.init(document.getElementById('main1'))
  // 绘制图表
  const option = {
    title: {
      text: 'K线图',
    },
    xAxis: {
      data: r.data.data.x,
    },
    yAxis: {},
    series: [
      {
        type: 'candlestick',
        data: r.data.data.val,
      },
    ],
  }
  myChart.setOption(option)
})
onMounted(async () => {
  //折线图图表
  let r = await simpleDataRequest()
  console.log(r.data)
  let xArr = r.data.data.map((v) => v.x)
  let valArr = r.data.data.map((v) => v.val)
  var myChart = echarts.init(document.getElementById('main2'))
  // 绘制图表
  const option = {
    title: {
      text: '折线图',
    },
    xAxis: {
      type: 'category',
      data: xArr,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: valArr,
        type: 'line',
      },
    ],
  }
  myChart.setOption(option)
})
</script>

<style scoped lang="scss">
.statistic_count {
  // 深层穿透  将el-card__body里面的 span 和 button 两端
  :deep(.el-card__body) {
    // .el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center; // span 文件垂直居中
  }
}
#main1,
#main2 {
  width: 80%;
  height: 400px;
}
</style>
